<template>
  <div class="todo-header">
    <span style="margin-right: 16px">Todo List</span>
    <div style="flex: 1">
      <el-input v-model="title" placeholder="输入事务项" class="input-with-select">
        <template #append>
          <el-button type="success" :icon="Plus" circle @click="handleAdd" />
        </template>
      </el-input>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue'
import { useTodoCtx } from '../useTodo'
import { ref } from 'vue'
const title = ref('')

const { add } = useTodoCtx()!

const handleAdd = () => {
  add(title.value)
  title.value = ''
}
</script>

<style scoped>
.todo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
